<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript替代v-model</title>
</head>
<body>
    <!-- v-model是prop: value和event: input的组合使用的一个语法糖 -->
    <!-- 输入的数值实时反映到p段落的数值里 -->
    <div id="app">
        <ele></ele>
    </div>

    <script src="./utils/vue.min.js"></script>

    <script>
        Vue.component('ele',{
            render: function (createElement) {

                var _this = this;
                console.log('this in ele:');
                console.dir(this);

                return createElement('div',
                    [
                        createElement('input',{
                            domProps: {
                                value: this.value
                            },
                            on:{
                                input: function (event) {
                                    _this.value = event.target.value;
                                    console.log('this in input:');
                                    console.dir(this);
                                    // 这里面的this对象是window对象；
                                }
                            }
                        }),
                        createElement('p','value:' + this.value)
                    ]
                );
            },
            data: function () {
                return {
                    value: ''
                };
            }
        });

        var app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>